<template>
  <el-dialog title="图标列表" :visible.sync="iconVisible" width="45%" center :before-close="handleClose">
    <el-tabs v-model="activeName" :stretch="true">
      <el-tab-pane v-for="(item,index) in iconList" :key="index" :label="item.label" :name="index">
        <el-row class="ico-list">
          <el-col v-for="(icon,idx) in item.data" :span="3" :key="idx">
            <i :class="icon" aria-hidden="true" @click="selectIcon(icon)"></i>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
  export default {
    props: {
      // 传入一个value，使组件支持v-model绑定
      visible: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        iconList: {
          from: {
            label: '表单文字编辑类',
            data: [
              'fa fa-check-square',
              'fa fa-check-square-o',
              'fa fa-circle',
              'fa fa-circle-o',
              'fa fa-dot-circle-o',
              'fa fa-minus-square',
              'fa fa-minus-square-o',
              'fa fa-plus-square',
              'fa fa-plus-square-o',
              'fa fa-square',
              'fa fa-square-o',
              'fa fa-eraser',
              'fa fa-language',
              'fa fa-edit',
              'fa fa-pencil',
              'fa fa-pencil-square',
              'fa fa-pencil-square-o',
              'fa fa-paint-brush'
            ]
          },
          direction: {
            label: '方向箭头类',
            data: [
              'fa fa-arrows',
              'fa fa-arrows-h',
              'fa fa-arrows-v',
              'fa fa-caret-square-o-down',
              'fa fa-caret-square-o-left',
              'fa fa-caret-square-o-right',
              'fa fa-caret-square-o-up',
              'fa fa-exchange',
              'fa fa-toggle-down',
              'fa fa-toggle-left',
              'fa fa-toggle-right',
              'fa fa-toggle-up',
              'fa fa-level-down',
              'fa fa-level-up',
              'fa fa-mail-forward',
              'fa fa-mail-reply',
              'fa fa-mail-reply-all',
              'fa fa-share',
              'fa fa-reply',
              'fa fa-reply-all',
              'fa fa-retweet',
              'fa fa-sort-asc',
              'fa fa-sort-desc',
              'fa fa-sort-down',
              'fa fa-sort-up',
              'fa fa-location-arrow'
            ]
          },
          videoPlayer: {
            label: '视频播放类',
            data: [
              'fa fa-random',
              'fa fa-arrows-alt',
              'fa fa-backward',
              'fa fa-compress',
              'fa fa-eject',
              'fa fa-expand',
              'fa fa-fast-backward',
              'fa fa-fast-forward',
              'fa fa-forward',
              'fa fa-pause',
              'fa fa-pause-circle',
              'fa fa-pause-circle-o',
              'fa fa-play',
              'fa fa-play-circle-o',
              'fa fa-step-backward',
              'fa fa-step-forward',
              'fa fa-stop',
              'fa fa-stop-circle',
              'fa fa-stop-circle-o',
              'fa fa-youtube-play',
              'fa fa-video-camera'
            ]
          },
          chart: {
            label: '图表类',
            data: [
              'fa fa-area-chart',
              'fa fa-bar-chart',
              'fa fa-bar-chart-o',
              'fa fa-line-chart',
              'fa fa-pie-chart',
              'fa fa-calendar',
              'fa fa-calendar-check-o',
              'fa fa-calendar-minus-o',
              'fa fa-calendar-o',
              'fa fa-calendar-plus-o',
              'fa fa-calendar-times-o',
              'fa fa-building',
              'fa fa-building-o',
              'fa fa-tachometer',
              'fa fa-calculator'
            ]
          },
          file: {
            label: '文件编辑类',
            data: [
              'fa fa-file-archive-o',
              'fa fa-file-audio-o',
              'fa fa-file-code-o',
              'fa fa-file-excel-o',
              'fa fa-file-image-o',
              'fa fa-file-movie-o',
              'fa fa-file-pdf-o',
              'fa fa-file-photo-o',
              'fa fa-file-picture-o',
              'fa fa-file-powerpoint-o',
              'fa fa-file-sound-o',
              'fa fa-file-video-o',
              'fa fa-file-word-o',
              'fa fa-file-zip-o',
              'fa fa-folder',
              'fa fa-folder-o',
              'fa fa-folder-open',
              'fa fa-folder-open-o',
              'fa fa-photo',
              'fa fa-picture-o',
              'fa fa-archive',
              'fa fa-download',
              'fa fa-image',
              'fa fa-book',
              'fa fa-cloud-download',
              'fa fa-cloud-upload',
              'fa fa-upload',
              'fa fa-share-alt',
              'fa fa-share-alt-square',
              'fa fa-share-square',
              'fa fa-share-square-o',
              'fa fa-sign-in',
              'fa fa-sign-out',
              'fa fa-external-link',
              'fa fa-external-link-square'
            ]
          },
          other: {
            label: '其他',
            data: [
              'fa fa-address-book',
              'fa fa-address-book-o',
              'fa fa-address-card',
              'fa fa-address-card-o',
              'fa fa-adjust',
              'fa fa-asterisk',
              'fa fa-ban',
              'fa fa-bars',
              'fa fa-bell',
              'fa fa-bell-o',
              'fa fa-bell-slash',
              'fa fa-bell-slash-o',
              'fa fa-bolt',
              'fa fa-bookmark',
              'fa fa-bookmark-o',
              'fa fa-braille',
              'fa fa-briefcase',
              'fa fa-camera',
              'fa fa-camera-retro',
              'fa fa-cc',
              'fa fa-check',
              'fa fa-check-circle',
              'fa fa-check-circle-o',
              'fa fa-clock-o',
              'fa fa-clone',
              'fa fa-close',
              'fa fa-code',
              'fa fa-code-fork',
              'fa fa-cog',
              'fa fa-cogs',
              'fa fa-creative-commons',
              'fa fa-credit-card',
              'fa fa-crop',
              'fa fa-crosshairs',
              'fa fa-cube',
              'fa fa-cubes',
              'fa fa-database',
              'fa fa-ellipsis-h',
              'fa fa-ellipsis-v',
              'fa fa-envelope',
              'fa fa-envelope-o',
              'fa fa-envelope-open',
              'fa fa-envelope-open-o',
              'fa fa-envelope-square',
              'fa fa-exclamation',
              'fa fa-exclamation-circle',
              'fa fa-exclamation-triangle',
              'fa fa-eye',
              'fa fa-eye-slash',
              'fa fa-gear',
              'fa fa-gears',
              'fa fa-group',
              'fa fa-hdd-o',
              'fa fa-headphones',
              'fa fa-heart',
              'fa fa-heart-o',
              'fa fa-heartbeat',
              'fa fa-history',
              'fa fa-home',
              'fa fa-hourglass-start',
              'fa fa-id-badge',
              'fa fa-inbox',
              'fa fa-industry',
              'fa fa-info',
              'fa fa-info-circle',
              'fa fa-institution',
              'fa fa-key',
              'fa fa-keyboard-o',
              'fa fa-life-bouy',
              'fa fa-life-ring',
              'fa fa-life-saver',
              'fa fa-lightbulb-o',
              'fa fa-lock',
              'fa fa-low-vision',
              'fa fa-minus',
              'fa fa-minus-circle',
              'fa fa-mobile',
              'fa fa-mobile-phone',
              'fa fa-money',
              'fa fa-navicon',
              'fa fa-newspaper-o',
              'fa fa-object-group',
              'fa fa-object-ungroup',
              'fa fa-paper-plane',
              'fa fa-paper-plane-o',
              'fa fa-paw',
              'fa fa-podcast',
              'fa fa-power-off',
              'fa fa-print',
              'fa fa-puzzle-piece',
              'fa fa-qrcode',
              'fa fa-question',
              'fa fa-question-circle',
              'fa fa-question-circle-o',
              'fa fa-quote-left',
              'fa fa-quote-right',
              'fa fa-recycle',
              'fa fa-refresh',
              'fa fa-registered',
              'fa fa-remove',
              'fa fa-reorder',
              'fa fa-search',
              'fa fa-search-minus',
              'fa fa-search-plus',
              'fa fa-send',
              'fa fa-send-o',
              'fa fa-server',
              'fa fa-signal',
              'fa fa-sitemap',
              'fa fa-sliders',
              'fa fa-sort',
              'fa fa-sort-amount-asc',
              'fa fa-sort-amount-desc',
              'fa fa-spinner',
              'fa fa-star',
              'fa fa-star-half',
              'fa fa-star-half-empty',
              'fa fa-star-half-full',
              'fa fa-star-half-o',
              'fa fa-star-o',
              'fa fa-sticky-note',
              'fa fa-sticky-note-o',
              'fa fa-street-view',
              'fa fa-suitcase',
              'fa fa-sun-o',
              'fa fa-support',
              'fa fa-tablet',
              'fa fa-tag',
              'fa fa-tags',
              'fa fa-tasks',
              'fa fa-ticket',
              'fa fa-times',
              'fa fa-times-circle',
              'fa fa-times-circle-o',
              'fa fa-trash',
              'fa fa-trash-o',
              'fa fa-tty',
              'fa fa-tv',
              'fa fa-unlock',
              'fa fa-unlock-alt',
              'fa fa-unsorted',
              'fa fa-user',
              'fa fa-user-circle',
              'fa fa-user-circle-o',
              'fa fa-user-o',
              'fa fa-user-plus',
              'fa fa-user-secret',
              'fa fa-user-times',
              'fa fa-users',
              'fa fa-warning',
              'fa fa-wifi',
              'fa fa-window-close',
              'fa fa-window-close-o',
              'fa fa-window-maximize',
              'fa fa-window-minimize',
              'fa fa-window-restore'
            ]
          }
        },
        iconVisible: this.visible,
        activeName: 'from'
      }
    },
    watch: {
      visible(val) {
        this.iconVisible = val
      }
    },
    methods: {
      sliceArray(start, end, data) {
        return data.slice(start, end)
      },
      selectIcon(icon) {
        this.$emit('selectIcon', icon)
        this.$emit('update:visible', false)
      },
      handleClose(done) {
        this.$emit('update:visible', false)
        done()
      }
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
  .ico-list {
    width: 100%;
    height: 350px;
    overflow-y: auto;
    text-align: center;
    i {
      padding: 10px;
      cursor: pointer;
      font-size: 20px;
    }
    i:hover {
      color: #67C23A;
    }
  }
</style>
